$loginWidth:16rem;$loginHeight:28.444rem;
$logoMargin:3.407rem auto;
$userWidth:14.385rem;$userHeight:1.274rem;
$userMargin:4.889rem 0.711rem 1.659rem 0.904rem;
$userFontSize:0.622rem;
$userLeft:1.543rem;$userBottom: 0.37rem;
$userTextWidth:12.834rem;
$passWidth:14.563rem;$passHeight:1.2rem;
$passMargin:1.659rem 0.711rem 3.23rem 0.815rem;
$passTextWidth:13.049rem;
$passBottom:0.415rem;
$personWidth:0.711rem;$personHeight:0.904rem;
$keyWidth:0.844rem;$keyHeight:0.77rem;
$userTop:0.0148rem;$passTop:0.0074rem;
$loginBtnWidth:11.733rem;$loginBtnHeight:2.163rem;
$regForWidth:7.985rem;$regForHeight:1.807rem;
$regForBorder:0.015rem solid #5a636c;
$regMargin:0.207rem 0.667rem 0.207rem 3.778rem;
$forMargin:0.207rem 3.778rem 0.207rem 0.667rem;
$firstBgWidth:0.844rem;$secondBgWidth:1.037rem;$thirdBgWidth:1.052rem;
$firstBgHeight:0.963rem;$secondBgHeight:0.904rem;$thirdBgHeight:0.83rem;
$firstBg:url(../img/qq.png) no-repeat;
$secondBg:url(../img/weixin.png) no-repeat;
$thirdBg:url(../img/weibo.png) no-repeat;
@mixin inputBox($Width,$Height,$Margin){
	width: $Width;
	position: relative;
	margin:$Margin;
	height: $Height;
	border-bottom: 1px solid #525d66;
}
@mixin text($width,$left,$bottom){
	width: $userTextWidth;
	height: 100%;
	background: rgba(0,0,0,0);
	border:none;
	color: #fff;
	position: absolute;
	left: $userLeft;
	box-sizing:border-box;
	font-size: $userFontSize;
	padding-bottom: $bottom;
}
@mixin textUrl($width,$height,$bottom){
	width: $width;
	height: $height;
	position: absolute;
	left: 0;
	padding-bottom: $bottom;
}
@mixin span($top){
	display: block;
	padding-left: 2rem;
	color: #70767b;
	font-size:$userFontSize;
	position: absolute;
	top:$top;
}
@mixin register($border,$margin){
	width: $regForWidth;
	height: $regForHeight;
	border-right: $border;
	box-sizing:content-box;
	a{
		display: block;
		width: 3.541rem;
		height: 1.378rem;
		border:0.015rem solid #555e66;
		border-radius: 0.689rem;
		margin:$margin;
		text-decoration: none;
		color:#73787d;
		text-align: center;
		line-height: 1.378rem;
		font-size: 0.533rem;
	}
}
@mixin bg($width,$height,$bg){
	width: $width;
	height: $height;
	display: block;
	background: $bg;
	background-size: 100% 100%;
}
html{
	font-size: 20px;
}
#login{
	width: $loginWidth;
	height: $loginHeight;
	background: url(../img/bg.png) no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}
.logo{
	width: 2.904rem;
	height: 2.133rem;
	background: url(../img/logo.png) no-repeat;
	opacity: 0.54;
	background-size: 100% 100%;
	margin:$logoMargin;
	a{
		display: block;
		text-indent: -99999rem;
		text-decoration: none;
	}
}
#user{
	@include inputBox($userWidth,$userHeight,$userMargin);
	#userName{
		@include text($userTextWidth,$userLeft,$userBottom);
	}
	#person{
		@include textUrl($personWidth,$personHeight,$userBottom);
	}
	#span_text{
		@include span($userTop);
	}
}
#password{
	@include inputBox($passWidth,$passHeight,$passMargin);
	#passName{
		@include text($passTextWidth,$userLeft,$passBottom);
	}
	#pass{
		@include textUrl($keyWidth,$keyHeight,$passBottom);
	}
	#span_pass{
		@include span($passTop);
	}
	#eye{
		width: 0.978rem;
		height: 0.563rem;
		background: url(../img/eye.png) no-repeat;
		background-size: 100% 100%;
		opacity: 0.5;
		position: absolute;
		right: 0;
		border:none;
		cursor: pointer;
		outline: none;
		-webkit-tap-highlight-color: rgba(255,255,255,0);
	}
}
#login_btn{
	display: block;
	width: $loginBtnWidth;
	height:$loginBtnHeight;
	background: #fff;
	text-align: center;
	line-height: $loginBtnHeight;
	margin:0 auto;
	border-radius: 1.081rem;
	color: #010101;
	font-size: 0.83rem;
	text-decoration: none;
}
#reg-for{
	width: $loginWidth;
	margin-top: 1.822rem;
	display: flex;
	justify-content:center;
	#register{
		@include register($regForBorder,$regMargin);
	}
	#forgetPass{
		@include register('0',$forMargin);
	}
}
#link{
	width: 8.874rem;
	height: 0.963rem;
	margin:1.719rem auto;
	display: flex;
	justify-content:space-between;
	li{
		.first{
			@include bg($firstBgWidth,$firstBgHeight,$firstBg);
		}
		.second{
			@include bg($secondBgWidth,$secondBgHeight,$secondBg);
		}
		.third{
			@include bg($thirdBgWidth,$thirdBgHeight,$thirdBg);
		}
	}
}